<template>
  <div class="attr-rows">
    <div
      class="attr-row"
      v-for="(attr, i) in controlAttribute"
      :key="i"
      v-show="attr.display !== false"
    >
      <label class="attr-lab">
        <a-tooltip>
          <span slot="title" v-html="attr.label"></span>
          <span v-html="attr.label"></span>
        </a-tooltip>
        <a-tooltip v-if="attr.tip">
          <span slot="title" v-html="attr.tip.content"></span>
          <a-icon :type="attr.tip.icon"/>
        </a-tooltip>
      </label>
      <div class="attr-val">
        <FormAttributeValue
          :dataItem="attr.dataItem"
          :label="attr.label"
          :dom="attr.dom"
          :value="attr.value"
          :field="attr.field"
          :type="attr.type"
          :attrType="attr.attrType"
          :attributes="controlAttribute"
          :options="attr.options"
          @change="change"
          @callback="callback"
        ></FormAttributeValue>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Inject, Watch } from 'vue-property-decorator';
import FormAttributeValue from './form-attribute-value.vue';
@Component({
  name: 'form-control-attribute',
  components: { FormAttributeValue }
})
export default class FormControlAttribute extends Vue {
  @Prop() attrKey !: string;// 控件ID
  @Prop() controlAttribute!: any;// 控件的属性集合

  @Inject()
  updateAttribute?:Function;
  @Inject()
  attrCallback?:Function;

  /**
   * 属性修改的回调
   * @param field
   * @param value
   */
  change(field: string, value:any) {
    if (this.updateAttribute) {
      this.updateAttribute(this.attrKey, field, value);
    }
  }
  /**
   * 属性修改的回调
   * @param field
   * @param fun
   */
  callback(field: string, fun:Function) {
    if (this.attrCallback) {
      this.attrCallback(this.attrKey, field, fun);
    }
  }

  mounted() {
  }
}
</script>

<style scoped>
</style>
